<template>
  <view class="category-container">
    <!-- 搜索栏 -->
    <view class="search-bar">
      <view class="search-input-wrapper">
        <text class="search-icon">🔍</text>
        <input type="text" placeholder="搜索商品" v-model="searchKeyword" class="search-input" />
      </view>
      <button class="search-btn" @click="handleSearch">搜索</button>
    </view>

    <!-- 主内容区域 -->
    <view class="main-content">
      <!-- 左侧分类菜单 -->
      <view class="category-menu">
        <view 
          v-for="(category, index) in categories" 
          :key="index"
          class="category-item" 
          :class="{ active: selectedCategory === index }"
          @click="selectCategory(index)"
        >
          {{ category }}
        </view>
      </view>

      <!-- 右侧内容展示 -->
      <view class="content-area">
        <!-- 当前选中分类标题 -->
        <view class="category-title">
          <text>{{ currentCategoryName }}</text>
        </view>

        <!-- 搜索结果区域 -->
        <view v-if="showSearchResults" class="search-results">
          <view class="search-results-title">
            <text>"{{ searchKeyword }}"的搜索结果</text>
          </view>
          
          <!-- 搜索结果商品列表 -->
          <view class="product-list">
            <view 
              v-for="(item, index) in searchResults" 
              :key="index" 
              class="product-item"
            >
              <image :src="item.img1" mode="widthFix" class="product-image"></image>
              <view class="product-info">
                <view class="product-name">{{ item.proname }}</view>
                <view class="product-price">¥{{ item.originprice }}</view>
                <view class="product-desc">{{ item.desc }}</view>
              </view>
            </view>
          </view>
        </view>
        
        <!-- 分类内容区域 -->
        <view v-else class="category-content">
          <!-- 这里将由用户自己填充内容 -->
          <view class="content-placeholder">
            <text>请选择左侧分类查看内容</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, } from 'vue';
import http from '@/utils/request.js'
// 搜索关键词
const searchKeyword = ref('');
// 搜索结果商品列表
const searchResults = ref([]);
// 是否显示搜索结果
const showSearchResults = ref(false);

// 分类数据（模拟，用户后续可替换为真实数据）
const categories = ref([
//   { id: 1, name: '推荐分类' },
//   { id: 2, name: '新品上市' },
//   { id: 3, name: '热门单品' },
//   { id: 4, name: '特惠活动' },
//   { id: 5, name: '品牌专区' },
//   { id: 6, name: '生活用品' },
//   { id: 7, name: '食品生鲜' },
//   { id: 8, name: '数码电器' },
//   { id: 9, name: '服饰鞋包' },
//   { id: 10, name: '美妆个护' }
]);

// onLoad(() => {
//   getCate()
// })

// 获取分类
function getCate(){
  http.get('api/pro/categorylist').then(res => {
	console.log(res);
	categories.value = res.data.data
  })
}
getCate()

function seckilllist(){
	http.get('api/pro/seckilllist').then(res=>{
		console.log(res);
	})
}
seckilllist()



// 选中的分类ID
const selectedCategory = ref(0);

// 当前选中分类名称
const currentCategoryName = computed(() => {
  if (selectedCategory.value === 0) {
    return '全部分类';
  }
  const category = categories.value[selectedCategory.value];
  return category ? category : '';
});

// 处理搜索
const handleSearch = () => {
  if (searchKeyword.value.trim()) {
    // 显示搜索结果区域
    showSearchResults.value = true;
    
    // 调用搜索API
    http.get('api/pro/search',{
      count:1,
      limitNum:10,
      keyword:searchKeyword.value
    }).then(res=>{
      console.log(res);
      // 假设API返回的数据格式与首页商品列表类似
      if (res.data && res.data.data) {
        searchResults.value = res.data.data;
      }
    })
    
    console.log('搜索关键词:', searchKeyword.value);
  }
};

// 选择分类时隐藏搜索结果
const selectCategory = (categoryId) => {
  selectedCategory.value = categoryId;
  showSearchResults.value = false;
  // 用户可以在这里添加获取分类内容的逻辑
};
</script>

<style scoped>
/* 分类页面容器 */
.category-container {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
}

/* 搜索栏 */
.search-bar {
  padding: 20rpx;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  gap: 20rpx;
  border-bottom: 1rpx solid #eeeeee;
}

.search-input-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  background-color: #f0f0f0;
  border-radius: 30rpx;
  padding: 10rpx 20rpx;
}

.search-icon {
  font-size: 28rpx;
  color: #999999;
  margin-right: 10rpx;
}

.search-input {
  flex: 1;
  background: transparent;
  border: none;
  font-size: 28rpx;
  color: #333333;
  padding: 10rpx 0;
}

.search-btn {
  padding: 10rpx 30rpx;
  background-color: #ff6b81;
  color: #ffffff;
  font-size: 28rpx;
  border-radius: 30rpx;
  border: none;
}

/* 主内容区域 */
.main-content {
  flex: 1;
  display: flex;
  overflow: hidden;
}

/* 左侧分类菜单 */
.category-menu {
  width: 200rpx;
  background-color: #ffffff;
  overflow-y: auto;
}

.category-item {
  padding: 30rpx 20rpx;
  text-align: center;
  font-size: 28rpx;
  color: #333333;
  border-bottom: 2rpx solid #f0f0f0;
}

.category-item.active {
  color: #ff6b81;
  background-color: #f5f5f5;
  font-weight: 600;
  position: relative;
}

.category-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6rpx;
  height: 60%;
  background-color: #ff6b81;
  border-radius: 0 3rpx 3rpx 0;
}

/* 右侧内容展示 */
.content-area {
  flex: 1;
  background-color: #ffffff;
  overflow-y: auto;
}

/* 搜索结果标题 */
.search-results-title {
  padding: 20rpx;
  font-size: 28rpx;
  color: #666666;
  border-bottom: 1rpx solid #f0f0f0;
}

/* 商品列表样式 */
.product-list {
  display: flex;
  flex-wrap: wrap;
  padding: 20rpx;
  gap: 20rpx;
}

/* 商品项样式 */
.product-item {
  width: calc(50% - 10rpx);
  background-color: #ffffff;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  margin-bottom: 10rpx;
}

/* 商品图片样式 */
.product-image {
  width: 100%;
  height: 300rpx;
  object-fit: cover;
}

/* 商品信息样式 */
.product-info {
  padding: 15rpx;
}

/* 商品名称样式 - 超出省略 */
.product-name {
  font-size: 28rpx;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 10rpx;
}

/* 商品价格样式 */
.product-price {
  font-size: 32rpx;
  color: #ff6b81;
  font-weight: 600;
  margin-bottom: 10rpx;
}

/* 商品描述样式 - 超出省略 */
.product-desc {
  font-size: 24rpx;
  color: #666;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* 响应式调整 */
@media (max-width: 350px) {
  .product-item {
    width: 100%; /* 小屏幕显示一个 */
  }
}

.category-title {
  padding: 20rpx;
  font-size: 32rpx;
  font-weight: 600;
  color: #333333;
  border-bottom: 1rpx solid #f0f0f0;
}

.category-content {
  padding: 20rpx;
}

.content-placeholder {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400rpx;
  color: #999999;
  font-size: 28rpx;
}
</style>
